<template>
  <!-- 页面布局card通用组件 -->
  <PageCard>
    <!-- 头部工具栏 -->
    <ToolBar>
      <el-form :model="queryForm" label-width="80px">
        <el-row :gutter="24">
          <el-col :span="4">
            <el-form-item label="关键词:">
              <el-input
                v-model="queryForm.keyword"
                placeholder="账号|手机号|身份证号"
                clearable
                style="100%;"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="审核状态:">
              <el-select
                v-model="queryForm.status"
                placeholder="请选择"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in this.$config.MERCHANT_APPLY_STATUS"
                  :key="Number(index)"
                  :label="item"
                  :value="Number(index)"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="启用状态:">
              <el-select
                v-model="queryForm.isEnabled"
                placeholder="请选择"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in this.$config.ENABLED_STATUS"
                  :key="Number(index)"
                  :label="item"
                  :value="Number(index)"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="创建时间:">
              <DatePickerTime
                model="datetimerange"
                :startTime="queryForm.startTime"
                :endTime="queryForm.endTime"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button type="default" @click="loadTableData">查询</el-button>
            <el-button type="default" @click="resetQuery">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </ToolBar>

    <!-- 表格 -->
    <TablePage
      ref="merchantTablePage"
      :customTableHeight="295"
      :loading.sync="loading"
      :table-data="merchantTableDatas"
      :columns="columns"
      @reloadData="loadTableData"
    />
  </PageCard>
</template>

<script>
import PageCard from "@/components/PageCard/index.vue";
import ToolBar from "@/components/ToolBar/index.vue";
import DatePickerTime from "@/components/DatePickeTime/index.vue";
import TablePage from "@/components/TablePage/index.vue";

import storage from "@/utils/storage";

import {
  merchantPage,
  merchantsReload,
  merchantsSyncMenu,
  merchantsSyncRole,
} from "@/api/merchant";

export default {
  name: "MerchantInfoPage",
  components: {
    PageCard,
    ToolBar,
    DatePickerTime,
    TablePage,
  },
  data() {
    return {
      loading: false,
      queryForm: null,
      initForm: {
        keyword: "",
        isEnabled: null,
        status: null,
        startTime: null,
        endTime: null,
      },
      merchantTableDatas: [],
      columns: [
        {
          title: "商户编号",
          fixed: "left",
          name: "merchantsNo",
          width: 150,
          align: "center",
        },
        {
          title: "账号",
          name: "username",
          width: 150,
          align: "center",
        },
        {
          title: "姓名",
          name: "name",
          width: 150,
          align: "center",
        },
        {
          title: "手机号",
          name: "phone",
          width: 150,
          align: "center",
        },
        {
          title: "身份证号",
          name: "idCard",
          width: 150,
          align: "center",
        },
        {
          title: "住址",
          name: "loginAddress",
          width: 250,
          align: "center",
        },
        {
          title: "联系人",
          width: 250,
          align: "left",
          customSlotScope: (row) => {
            return (
              "姓名：" +
              row.contactsName +
              "<br>" +
              "手机号：" +
              row.contactsPhone +
              "<br>" +
              "地址：" +
              row.contactsAddress
            );
          },
        },
        {
          title: "审核状态",
          name: "status",
          width: 150,
          align: "center",
          select: true,
          options: this.$config.MERCHANT_APPLY_STATUS,
          optionsColor: [
            "#606266",
            "#3c9cff",
            "#f4ea29",
            "#1afa29",
            "#d4237a",
            "#d81e06",
          ],
        },
        {
          title: "启用状态",
          name: "isEnabled",
          width: 150,
          align: "center",
          select: true,
          options: this.$config.ENABLED_STATUS,
          optionsColor: ["#d81e06", "#1afa29"],
        },
        {
          title: "创建时间",
          name: "createTime",
          width: 250,
          align: "center",
        },
        {
          title: "操作",
          name: "operate",
          fixed: "right",
          width: 150,
          operate: [
            {
              name: "详情",
              fun: this.rowDetail,
            },
            {
              name: "重载",
              permission: "MerchantsReload",
              confirm: true,
              message: "确定重载选择的合作商信息吗?",
              fun: this.reloadCache,
              customStyle: {
                "margin-left": "10px",
              },
            },
            {
              name: "更多",
              more: [
                {
                  name: "同步菜单",
                  permission: "MerchantsSyncMenu",
                  fun: async (row) => {
                    this.$confirm("确定同步菜单到当前商户吗？", "提示", {
                      confirmButtonText: "确定",
                      cancelButtonText: "取消",
                      type: "warning",
                    })
                      .then(async () => {
                        await merchantsSyncMenu(row.id);
                      })
                      .catch(() => {
                        this.$message({
                          type: "info",
                          message: "已取消操作",
                        });
                      });
                  },
                },
                {
                  name: "同步角色",
                  permission: "MerchantsSyncRole",
                  fun: async (row) => {
                    this.$confirm("确定同步角色到当前商户吗？", "提示", {
                      confirmButtonText: "确定",
                      cancelButtonText: "取消",
                      type: "warning",
                    })
                      .then(async () => {
                        await merchantsSyncRole(row.id);
                      })
                      .catch(() => {
                        this.$message({
                          type: "info",
                          message: "已取消操作",
                        });
                      });
                  },
                },
              ],
            },
          ],
        },
      ],
    };
  },
  created() {
    this.queryForm = { ...this.initForm };
    this.$nextTick(() => {
      this.loadTableData();
    });
  },
  methods: {
    // 加载表格数据
    async loadTableData() {
      this.loading = true;
      const { pageNumber, pageSize } = this.$refs.merchantTablePage.page;
      const res = await merchantPage({
        pageNumber,
        pageSize,
        ...this.queryForm,
      });
      this.$refs.merchantTablePage.page.pageNumber = res.data.pageNumber;
      this.$refs.merchantTablePage.page.pageSize = res.data.pageSize;
      this.$refs.merchantTablePage.page.total = res.data.total;
      this.merchantTableDatas = res.data.rows;
      this.loading = false;
    },

    // 重置查询
    resetQuery() {
      this.queryForm = this.initForm;
      this.loadTableData();
    },

    // 详情
    rowDetail(row) {
      // 缓存页面数据ID 用于上下一条
      const tableIds = this.merchantTableDatas.map((item) => item.id);
      storage.setFormPageTableIds(tableIds);

      this.$router.push({
        path: "/merchant/info/detail",
        query: {
          id: row.id,
        },
      });
    },

    // 重载
    async reloadCache(row) {
      await merchantsReload(row.id);
    },
  },
};
</script>

<style lang="scss" scoped></style>
